<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>影院后台管理系统</title>
  <link rel="stylesheet" href="layui/css/layui.css">
</head>

<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo">影院后台管理系统</div>
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
              <span id="uaccount">贤心</span>
        </a>
        <!-- <dl class="layui-nav-child">
        </dl> -->
      </li>
      <li class="layui-nav-item"><a href="user/logout">注销</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
     <ul class="layui-nav layui-nav-tree"  lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="layui-this" href="javascript:;">主页(统计信息)</a>
        </li>
       <li class="layui-nav-item">
          <a href="businessManagement.html">营业管理</a>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">影院管理</a>
          <dl class="layui-nav-child">
          	<dd><a href="moiveinfo.html">总影院详情</a></dd>
            <dd><a href="mymoivesystem.html">分影院管理</a></dd>
            <dd><a href="halllist.html">影厅管理</a></dd>
            <dd><a href="movies.html">影片管理</a></dd>
			<dd><a href="hall.html">添加影厅</a></dd>
			<dd><a href="arrange.html">排片</a></dd>
        	<dd><a href="uploadvideo.html">上传影片</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="feedback.html">信息反馈</a></li>
      </ul>
    </div>
  </div>
  

 <div class="layui-body">
    <!-- 内容主体区域 -->
  <div style="padding: 20px; background-color: #F2F2F2;">
  <div class="layui-row layui-col-space15">
	<div class="layui-col-sm6 layui-col-md12">
	  <div class="layui-card">
		<div class="layui-card-header">

			<div class="layui-inline">
				<div class="layui-input-inline" style="margin-top: -4px;">
					<input type="text" class="layui-input" id="test3" placeholder="请选择日期 ">
				</div>
			</div>
			<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;display:inline;">
			<button class="layui-btn" data-method="notice"><i class="layui-icon layui-icon-search layuiadmin-button-btn"></i></button>
			</div>	
				
		  </div>
	    </div>
	  </div>
	<!-- 第一块面板 -->
    <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">
			营业额
		<span class="layui-badge layui-bg-blue layuiadmin-badge" style="float: right; margin: -9px,0px,0px,0px;">年</span>
		</div>
        <div class="layui-card-body layuiadmin-card-list" >
          <p id="tatalmoney" style="font-size: 30px;"></p>
		  <p>总营业额
          <span class="layuiadmin-span-color"style="float: right; margin: -9px,0px,0px,0px;"><i class="layui-inline layui-icon" ></i></span>
            </p>
        </div>
      </div>
    </div>
	
	<!-- 第二块面板 -->
    <div class="layui-col-sm6 layui-col-md3">
      <div class="layui-card">
        <div class="layui-card-header">
    		用户量
    	<span class="layui-badge layui-bg-green layuiadmin-badge"style="float: right; margin: -9px,0px,0px,0px;">月</span>
    	</div>
        <div class="layui-card-body layuiadmin-card-list" >
          <p id="userNum" style="font-size: 30px;"></p>
    	  <p>近一个月 
          <span class="layuiadmin-span-color" style="float: right; margin: -9px,0px,0px,0px;"><i class="layui-icon"></i></span>
            </p>
        </div>
      </div>
    </div>
	
	<!-- 第三块面板 -->
	<div class="layui-col-sm6 layui-col-md3">
	  <div class="layui-card">
	    <div class="layui-card-header">
			分院个数
		<span class="layui-badge layui-bg-cyan layuiadmin-badge"style="float: right; margin: -9px,0px,0px,0px;">个</span>
		</div>
	    <div class="layui-card-body layuiadmin-card-list" >
	      <p id="cinemaNum" style="font-size: 30px;"></p>
		  <p>总个数 
	      <span class="layuiadmin-span-color"style="float: right; margin: -9px,0px,0px,0px;"><i class="layui-inline layui-icon layui-icon-home"></i></span>
	        </p>
	    </div>
	  </div>
	</div>
	
	<!-- 第四块面板 -->
	<div class="layui-col-sm6 layui-col-md3">
	  <div class="layui-card">
	    <div class="layui-card-header">
			好评率
		<span class="layui-badge layui-bg-orange layuiadmin-badge"style="float: right; margin: -9px,0px,0px,0px;">月</span>
		</div>
	    <div class="layui-card-body layuiadmin-card-list" >
	      <p  style="font-size: 30px;"><span id="favorableRate"></span>%</p>
		  <p>总计 
	      <span class="layuiadmin-span-color"style="float: right; margin: -9px,0px,0px,0px;"><i class="layui-inline layui-icon layui-icon-praise"></i></span>
	        </p>
	    </div>
	  </div>
	</div>
	
	<!-- 表格面板1 -->
	<div class="layui-col-md12">
	  <div class="layui-card">
	    <div class="layui-card-header">
			营业额表
		</div>
	    <div class="layui-card-body layuiadmin-card-list" >
		   <!-- 表格容器 -->
	      <div id="main" style="width: 980px;height:460px;"></div>
	    </div>
	  </div>
	</div>
    
	<!-- 表格面板2 -->
	<div class="layui-col-md6">
	  <div class="layui-card">
	    <div class="layui-card-header">
			用户喜好表
		</div>
	    <div class="layui-card-body layuiadmin-card-list" >
		   <!-- 表格容器 -->
	      <div id="main2" style="width: 520px;height:400px;"></div>
	    </div>
	  </div>
	</div>
	
	<!-- 表格面板3 -->
	<div class="layui-col-md6">
	  <div class="layui-card">
	    <div class="layui-card-header">
			活跃用户表
		</div>
	    <div class="layui-card-body layuiadmin-card-list" >
		   <!-- 表格容器 -->
	      <div id="main3" style="width: 520px;height:400px;"></div>
	    </div>
	  </div>
	</div>
	
  </div>
</div> 
</div>	

	
  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © 版权归影院所有
  </div>
</div>

<!-- 时间选择器 -->
<script src="laydate/laydate.js"></script>
<script>
//年选择器
var ins22 = laydate.render({
	  elem: '#test3'
	  ,type: 'year'
	  ,max: '2019'
	  ,ready: function(){
// 	    ins22.hint('日期只能选定为19年以前');
	  }
	});
</script>

<script src="layui/jquery.min.js"></script>
<script>
	$(function(){
		start();
		test();
	})
	
	
	function start(){
		$.ajax({
			url: "/data/allData",
			type:"post",
			success:function(data){
				//alert(data);
				$("#tatalmoney").html(data.turnover);
				$("#userNum").html(data.userNum);
				$("#cinemaNum").html(data.cinemaNum);
				$("#favorableRate").html(data.favorableRates); 
			}
		});
	}
	
	function test(){
		$.ajax({
			url: "/user/getAccount",
			type:"get",
			success:function(data){
				$("#uaccount").html(data);
			}
		});
	}
	
	function sercherBydate(){
		var year="2018";
		 $.ajax({
				url: "/data/turnoverTable",
				type:"post",
				async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
				data:{odata:year},
				success:function(result){
					
				   for(var i=0;i<result.list.length;i++){
					   	if(result.list[i].name.indexOf("01") != -1){
					   	names.push("一月");
					   	}
					   	else if(result.list[i].name.indexOf("02") != -1){
					   	names.push("二月");
					   	}
					   	else if(result.list[i].name.indexOf("03") != -1){
					   	names.push("三月");
					   	}
					   	else if(result.list[i].name.indexOf("04") != -1){
					   	names.push("四月");
					   	}
					   	else if(result.list[i].name.indexOf("05") != -1){
					   	names.push("五月");
					   	}
					   	else if(result.list[i].name.indexOf("06") != -1){
					   	names.push("六月");
					   	}
					   	else if(result.list[i].name.indexOf("07") != -1){
					   	names.push("七月");
					   	}
					   	else if(result.list[i].name.indexOf("08") != -1){
					   	names.push("八月");
					   	}
					   	else if(result.list[i].name.indexOf("09") != -1){
					   	names.push("九月");
					   	}
					   	else if(result.list[i].name.indexOf("10") != -1){
					   	names.push("十月");
					   	}
					   	else if(result.list[i].name.indexOf("11") != -1){
					   	names.push("十一月");
					   	}
					   	else if(result.list[i].name.indexOf("12") != -1){
					   	names.push("十二月");
					   	}
		                //names.push(result[i].name);    //挨个取出类别并填入类别数组
		           }
				   //alert(names);
				   for(var i=0;i<result.list.length;i++){       
					   value.push(result.list[i].value);    //挨个取出类别并填入类别数组
		          }
				  //alert(value);
				  myChart.hideLoading(); 
		          myChart.setOption({
		        	  xAxis: {
		                  data: names
		              },
		              series: [{
		                  // 根据名字对应到相应的系列
		                  name: '2019年',
		                  data: value
		              }]
		        		
		        	})       		
				}
			});
	}
	
</script>

<script src="layui/layui.all.js"></script>
<script>
//弹出层
layui.use('layer', function() { //独立版的layer无需执行这一句
	var $ = layui.jquery,
		layer = layui.layer; //独立版的layer无需执行这一句

	//触发事件
	var active = {
		setTop: function() {
			var that = this;
			//多窗口模式，层叠置顶
			layer.open({
				type: 2 //此处以iframe举例
					,
				title: '当你选择该窗体时，即会在最顶端',
				area: ['390px', '260px'],
				shade: 0,
				maxmin: true,
				offset: [ //为了演示，随机坐标
					Math.random() * ($(window).height() - 300), Math.random() * ($(window).width() - 390)
				],
				content: '//layer.layui.com/test/settop.html',
				btn: ['继续弹出', '全部关闭'] //只是为了演示
					,
				yes: function() {
					$(that).click();
				},
				btn2: function() {
						layer.closeAll();
					}

					,
				zIndex: layer.zIndex //重点1
					,
				success: function(layero) {
					layer.setTop(layero); //重点2
				}
			});
		},
		notice: function() {
			//示范一个公告层
			layer.open({
				type: 2,
				title: false //不显示标题栏
					,
				closeBtn: true,
				area: ['850px', '450px'],
				shade: 0.8,
				shadeClose: true,
				anim: 5,
				id: 'LAY_layuipro' //设定一个id，防止重复弹出
					/* ,btn: ['新增', '取消'] */
					,
				btnAlign: 'c',
				moveType: 1 //拖拽模式，0或者1
					,
				content: 'searchTable_gjf.html?year='+$("#test3").val(),
				success: function(layero, index){
				    var body = layer.getChildFrame('body', index);
				    var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
				    console.log(body.html()) //得到iframe页的body内容
				  }
			});
		},
		offset: function(othis) {
			var type = othis.data('type'),
				text = othis.text();

			layer.open({
				type: 1,
				offset: type //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
					,
				id: 'layerDemo' + type //防止重复弹出
					,
				content: '<div style="padding: 20px 100px;">' + text + '</div>',
				btn: '关闭全部',
				btnAlign: 'c' //按钮居中
					,
				shade: 0 //不显示遮罩
					,
				yes: function() {
					layer.closeAll();
				}
			});
		}
	};

	$('#layerDemo .layui-btn').on('click', function() {
		var othis = $(this),
			method = othis.data('method');
		active[method] ? active[method].call(this, othis) : '';
	});

});

//Demo
layui.use('form', function(){
  var form = layui.form;
  
  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script> 

<!-- EChart的JS -->
<script src="EChart/echarts.min.js"></script>
<script type="text/javascript">
	// 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    //myChart.showLoading();
    var option = {
    	    title : {
    	        text: '年销售额',
    	        subtext: ''
    	    },
    	    tooltip : {
    	        trigger: 'axis'
    	    },
    	    legend: {
    	        data:['2018年','2019年']
    	    },
    	    toolbox: {
    	        show : true,
    	        feature : {
    	            dataView : {show: false, readOnly: false},
    	            magicType : {show: true, type: ['line', 'bar']},
    	            restore : {show: true},
    	            saveAsImage : {show: false}
    	        }
    	    },
    	    calculable : true,
    	    xAxis : [
    	        {
    	            type : 'category',
    	            //data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
    	            data : []
    	        }
    	    ],
    	    yAxis : [
    	        {
    	            type : 'value'
    	        }
    	    ],
    	    series : [
    	        {
    	            name:'2019年',
    	            type:'bar',
    	            //data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
    	            data:[],
    	            markPoint : {
    	                data : [
    	                    {type : 'max', name: '最大值'},
    	                    {type : 'min', name: '最小值'}
    	                ]
    	            },
    	            markLine : {
    	                data : [
    	                    {type : 'average', name: '平均值'}
    	                ]
    	            }
    	        }
    	        ,{
    	            name:'2018年',
    	            type:'bar',
    	            //data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
    	            data:[],
    	            markPoint : {
    	                data : [
    	                    {type : 'max', name: '最大值'},
    	                    {type : 'min', name: '最小值'}
    	                ]
    	            },
    	            markLine : {
    	                data : [
    	                    {type : 'average', name: '平均值'}
    	                ]
    	            }
    	        }
    	        
    			
    	    ]
    	};

    myChart.showLoading();
    var names1=[];    //类别数组（实际用来盛放X轴坐标值）
    var value1=[];    //销量数组（实际用来盛放Y坐标值）
    var names2=[];    //类别数组（实际用来盛放X轴坐标值）
    var value2=[];    //销量数组（实际用来盛放Y坐标值）
    var year="2019";
    $.ajax({
		url: "/data/turnoverTable",
		type:"post",
		async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
		data:{odata:year},
		success:function(result){
			
		   for(var i=0;i<result.list2.length;i++){
			   	if(result.list2[i].name.indexOf("01") != -1){
			   	names2.push("一月");
			   	}
			   	else if(result.list2[i].name.indexOf("02") != -1){
			   	names2.push("二月");
			   	}
			   	else if(result.list2[i].name.indexOf("03") != -1){
			   	names2.push("三月");
			   	}
			   	else if(result.list2[i].name.indexOf("04") != -1){
			   	names2.push("四月");
			   	}
			   	else if(result.list2[i].name.indexOf("05") != -1){
			   	names2.push("五月");
			   	}
			   	else if(result.list2[i].name.indexOf("06") != -1){
			   	names2.push("六月");
			   	}
			   	else if(result.list2[i].name.indexOf("07") != -1){
			   	names2.push("七月");
			   	}
			   	else if(result.list2[i].name.indexOf("08") != -1){
			   	names2.push("八月");
			   	}
			   	else if(result.list2[i].name.indexOf("09") != -1){
			   	names2.push("九月");
			   	}
			   	else if(result.list2[i].name.indexOf("10") != -1){
			   	names2.push("十月");
			   	}
			   	else if(result.list2[i].name.indexOf("11") != -1){
			   	names2.push("十一月");
			   	}
			   	else if(result.list2[i].name.indexOf("12") != -1){
			   	names2.push("十二月");
			   	}
           }
		   for(var i=0;i<result.list1.length;i++){
			   	if(result.list1[i].name.indexOf("01") != -1){
			   	names1.push("一月");
			   	}
			   	else if(result.list1[i].name.indexOf("02") != -1){
			   	names1.push("二月");
			   	}
			   	else if(result.list1[i].name.indexOf("03") != -1){
			   	names1.push("三月");
			   	}
			   	else if(result.list1[i].name.indexOf("04") != -1){
			   	names1.push("四月");
			   	}
			   	else if(result.list1[i].name.indexOf("05") != -1){
			   	names1.push("五月");
			   	}
			   	else if(result.list1[i].name.indexOf("06") != -1){
			   	names1.push("六月");
			   	}
			   	else if(result.list1[i].name.indexOf("07") != -1){
			   	names1.push("七月");
			   	}
			   	else if(result.list1[i].name.indexOf("08") != -1){
			   	names1.push("八月");
			   	}
			   	else if(result.list1[i].name.indexOf("09") != -1){
			   	names1.push("九月");
			   	}
			   	else if(result.list1[i].name.indexOf("10") != -1){
			   	names1.push("十月");
			   	}
			   	else if(result.list1[i].name.indexOf("11") != -1){
			   	names1.push("十一月");
			   	}
			   	else if(result.list1[i].name.indexOf("12") != -1){
			   	names1.push("十二月");
			   	}
               //names.push(result[i].name);    //挨个取出类别并填入类别数组
          }
		   //alert(names);
		   for(var i=0;i<result.list2.length;i++){       
			   value2.push(result.list2[i].value);    //挨个取出类别并填入类别数组
          }
		   for(var i=0;i<result.list1.length;i++){       
			   value1.push(result.list1[i].value);    //挨个取出类别并填入类别数组
          }
		  //alert(value);
		  myChart.hideLoading(); 
          myChart.setOption({
        	  xAxis: {
                  data: names1
              },
              series: [{
                  // 根据名字对应到相应的系列
                  name: '2019年',
                  data: value2
              }
              ,{
            	// 根据名字对应到相应的系列
                  name: '2018年',
                  data: value1 
              }]
        		
        	})       		
		}
	});
	
	
	// 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
	
	//用户喜好表
	var myChart2 = echarts.init(document.getElementById('main2'));
	myChart2.showLoading();
	$.ajax({
		url:'data/favorableTable',
		type:'post',
		async : true,
		data : {},
        dataType : "json", 
        success : function(result) {
        	myChart2.hideLoading(); 
        	myChart2.setOption({
        		title : {
        	        text: '电影类型喜好',
        	        subtext: '',
        	        x:'center'
        	    },
        	    tooltip : {
        	        trigger: 'item',
        	        formatter: "{a} <br/>{b} : {c} ({d}%)"
        	    },
        	    legend: {
        	        orient: 'vertical',
        	        left: 'left',
        	        /* data: ['喜剧片','恐怖片','爱情片','科幻片','悬疑片'] */
        	        data:result,
        	    },
        	    series : [
        	        {
        	            name: '访问来源',
        	            type: 'pie',
        	            radius : '55%',
        	            center: ['50%', '60%'],
        	            /* data:[
        	                {value:335, name:'喜剧片'},
        	                {value:310, name:'恐怖片'},
        	                {value:234, name:'爱情片'},
        	                {value:135, name:'科幻片'},
        	                {value:1548, name:'悬疑片'}
        	            ], */
        	            data:result,
        	            itemStyle: {
        	                emphasis: {
        	                    shadowBlur: 10,
        	                    shadowOffsetX: 0,
        	                    shadowColor: 'rgba(0, 0, 0, 0.5)'
        	                }
        	            }
        	        }
        	    ]	
        	})
        
       },
        error : function(errorMsg) {
            //请求失败时执行该函数
        alert("图表请求数据失败!");
        myChart2.hideLoading(); 
        }
	})
	
	//活跃用户表 
	var myChart3 = echarts.init(document.getElementById('main3'));
	var names3=[];    //类别数组（实际用来盛放X轴坐标值）
    var value3=[];    //销量数组（实际用来盛放Y坐标值）
	
	myChart3.showLoading();
	$.ajax({
		url:'data/activeUserTable', 
		type:'post',
		async : true,
		data : {},
        dataType : "json", 
        success : function(result) {
        	for(var i=0;i<result.length;i++){
			   	if(result[i].name.indexOf("01") != -1){
			   	names3.push("一月");
			   	}
			   	else if(result[i].name.indexOf("02") != -1){
			   	names3.push("二月");
			   	}
			   	else if(result[i].name.indexOf("03") != -1){
			   	names3.push("三月");
			   	}
			   	else if(result[i].name.indexOf("04") != -1){
			   	names3.push("四月");
			   	}
			   	else if(result[i].name.indexOf("05") != -1){
			   	names3.push("五月");
			   	}
			   	else if(result[i].name.indexOf("06") != -1){
			   	names3.push("六月");
			   	}
			   	else if(result[i].name.indexOf("07") != -1){
			   	names3.push("七月");
			   	}
			   	else if(result[i].name.indexOf("08") != -1){
			   	names3.push("八月");
			   	}
			   	else if(result[i].name.indexOf("09") != -1){
			   	names3.push("九月");
			   	}
			   	else if(result[i].name.indexOf("10") != -1){
			   	names3.push("十月");
			   	}
			   	else if(result[i].name.indexOf("11") != -1){
			   	names3.push("十一月");
			   	}
			   	else if(result[i].name.indexOf("12") != -1){
			   	names3.push("十二月");
			   	}
           }
           
        	for(var i=0;i<result.length;i++){       
 			   value3.push(result[i].value);    //挨个取出类别并填入类别数组
           }
        	
        	myChart3.hideLoading(); 
        	myChart3.setOption({
      			    xAxis: {
      			        type: 'category',
      			        data: names3
      			    },
      			    yAxis: {
      			        type: 'value'
      			    },
      			    series: [{
      			        data: value3,
      			        type: 'line'
      			    }]

        	})
        
       },
        error : function(errorMsg) {
            //请求失败时执行该函数
        alert("图表请求数据失败!");
        myChart3.hideLoading(); 
        }
	})
	
</script>

</body>
</html>
